import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

import {
  useServiceQuery,
  useUpdateDirectMarketingMutation,
  useUpdateProviderAccessMutation,
} from 'typings/graphql';

import { FormStatus } from '@nova-hf/ui/umd/ts/src/form-elements/FormStatusMessage';
import { Text, Grid, GridItem, Checkbox, FormStatusMessage } from '@nova-hf/ui';

import { StillingarLoader } from '../components/StillingarLoader';
import { useTranslation } from 'utils/i18n';

export const PhonenumberSettingsContainer = () => {
  const { t } = useTranslation('stillingar');
  const { query } = useRouter();

  const { data, loading, error } = useServiceQuery({
    variables: {
      serviceId: (query.serviceId as string) ?? '',
    },
  });

  const service = data?.service;

  if (service?.__typename !== 'MobileService' || error) {
    return null;
  }

  const [updateDirectMarketing] = useUpdateDirectMarketingMutation();
  const [updateProviderAccess] = useUpdateProviderAccessMutation();

  const [directMarketing, setDirectMarketing] = useState(service?.hasBannedDirectMarketing);
  const [providerAccess, setProviderAccess] = useState(service?.hasAllowedProviderAccess);

  const [showDirectMarketingMessage, setShowDirectMarketingMessage] = useState<FormStatus | null>(
    null,
  );
  const [showProviderAccessMessage, setShowProviderAccessMessage] = useState<FormStatus | null>(
    null,
  );

  const onChangeDirectMarketing = async (checked: boolean) => {
    try {
      const { data } = await updateDirectMarketing({
        variables: {
          input: {
            serviceId: (query.serviceId as string) ?? '',
            hasBannedDirectMarketing: !checked,
          },
        },
      });
      if (data?.updateDirectMarketing?.service) {
        setShowDirectMarketingMessage('success');
        setDirectMarketing(checked);
      }
      if (data?.updateDirectMarketing?.error) {
        setShowDirectMarketingMessage('error');
      }
    } catch (e) {
      setShowDirectMarketingMessage('error');
    }
  };

  const onChangeProviderAccess = async (checked: boolean) => {
    try {
      const { data } = await updateProviderAccess({
        variables: {
          input: {
            serviceId: (query.serviceId as string) ?? '',
            hasAllowedInfoProviderAccess: checked,
          },
        },
      });
      if (data?.updateProviderAccess?.service) {
        setShowProviderAccessMessage('success');
        setProviderAccess(checked);
      }
      if (data?.updateProviderAccess?.error) {
        setShowProviderAccessMessage('error');
      }
    } catch (e) {
      setShowProviderAccessMessage('error');
    }
  };

  useEffect(() => {
    // Hide the messages after 3 seconds
    const timeId = setTimeout(() => {
      if (showDirectMarketingMessage) setShowDirectMarketingMessage(null);
    }, 5000);

    return () => {
      clearTimeout(timeId);
    };
  }, [showDirectMarketingMessage]);

  useEffect(() => {
    // Hide the messages after 3 seconds
    const timeId = setTimeout(() => {
      if (showProviderAccessMessage) setShowProviderAccessMessage(null);
    }, 5000);

    return () => {
      clearTimeout(timeId);
    };
  }, [showProviderAccessMessage]);

  if (!service || error) return null;
  if (loading) return <StillingarLoader />;

  return (
    <Grid gridTemplate={{ sm: 4, md: 8 }}>
      <GridItem gridColumn={{ sm: 'span4' }}>
        <Checkbox
          type="checked"
          value={t('phonenumber.providerAccessLabel')}
          isChecked={providerAccess || false}
          onChange={(e) => onChangeProviderAccess(e.target.checked)}
          color="pink"
        />
        <Text variant="pSmallRegular" marginTop={2} marginLeft={3}>
          {t('phonenumber.providerAccessDescription')}
        </Text>
        {showProviderAccessMessage === 'error' && (
          <FormStatusMessage
            status={showProviderAccessMessage}
            message={t('userSection.providerAccessError')}
          />
        )}
      </GridItem>
      <GridItem gridColumn={{ sm: 'span4' }}>
        <Checkbox
          type="checked"
          value={t('phonenumber.directMarketingLabel')}
          isChecked={directMarketing || false}
          onChange={(e) => onChangeDirectMarketing(e.target.checked)}
          color="pink"
        />
        <Text variant="pSmallRegular" marginTop={2} marginLeft={3}>
          {t('phonenumber.directMarketingDescription')}
        </Text>

        {showDirectMarketingMessage === 'error' && (
          <FormStatusMessage
            status={showDirectMarketingMessage}
            message={t('userSection.directMarketingError')}
          />
        )}
      </GridItem>
    </Grid>
  );
};